<template>
  <div class="get-award">
    <div ref="getAward"></div>
    <div style="position: fixed; right: 10px; bottom: 70px;">
      <button class="kpstartbtn luck-wait lotter-wait">停止</button>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import * as TWEEN from 'tween'
import { CSS3DObject, CSS3DRenderer } from '@/common/js/css3drenderer'
export default {
  name: 'PersonDialog',
  data () {
    return {
      table: [],
      camera: null,
      scene: null,
      renderer: null,
      targets: { grid: [] },
      objects: []
    }
  },
  methods: {
    getImgs () {
      let row = 1
      let col = 1
      for (var i = 0; i < 168; i++) {
        var file = {}
        file.img =
          'http://wx.qlogo.cn/mmopen/vi_32/iavhNQNYg0tY5DFibJNnOmsWoT1MYSZYPia52DvjWeUicdvJ5r79rSjGGpIVVicqGkWa5ib6FaXVe6YxxnIKsHXCxXKQ/132'
        file.p_x = col++
        file.p_y = row
        this.table[i] = file
        if (col > 18) {
          col = 1
          row++
        }
      }
    },
    init () {
      this.camera = new THREE.PerspectiveCamera(
        50,
        window.innerWidth / window.innerHeight,
        1,
        10000
      )
      this.camera.position.z = 3000
      this.scene = new THREE.Scene()
      this.initAnmiated()
      this.createGrid()
      this.renderer = new CSS3DRenderer()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.domElement.style.position = 'absolute'
      this.$refs.getAward.appendChild(this.renderer.domElement)
      this.transform(this.targets.grid, 2000)
      window.addEventListener('resize', this.onWindowResize, false)
    },
    initAnmiated () {
      for (let i = 0; i < this.table.length; i++) {
        let element = document.createElement('div')
        element.className = 'element'
        element.style.backgroundColor =
          'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'
        let img = document.createElement('img')
        img.src = this.table[i].img
        img.style.width = '100%'
        img.style.height = '100%'
        element.appendChild(img)
        let object = new CSS3DObject(element)
        object.position.x = Math.random() * 4000 - 2000
        object.position.y = Math.random() * 4000 - 2000
        object.position.z = Math.random() * 4000 - 2000
        this.scene.add(object)
        this.objects.push(object)
      }
    },
    createGrid () {
      let vector = new THREE.Vector3()
      for (let i = 0; i < this.objects.length; i++) {
        let object = new THREE.Object3D()
        object.position.x = (i % 5) * 600 - 1200
        object.position.y = -(Math.floor(i / 5) % 5) * 400 + 800
        object.position.z = 200 - i * 60 * 1.5
        object.rotation.z = -i * 0.03

        vector.x = object.position.x
        vector.y = object.position.y
        vector.z = object.position.z

        object.lookAt(vector)
        this.targets.grid.push(object)
      }
    },
    transform (targets, duration) {
      TWEEN.removeAll()
      for (let i = 0; i < this.objects.length; i++) {
        let object = this.objects[i]
        let target = targets[i]
        new TWEEN.Tween(object.position)
          .to(
          {
            x: target.position.x,
            y: target.position.y,
            z: target.position.z
          },
            50
          )
          .easing(TWEEN.Easing.Exponential.InOut)
          .start()
        new TWEEN.Tween(object.rotation)
          .to(
          {
            x: target.rotation.x,
            y: target.rotation.y,
            z: target.rotation.z
          },
            Math.random() * duration + duration
          )
          .easing(TWEEN.Easing.Exponential.InOut)
          .start()
      }
      new TWEEN.Tween(this)
        .to({}, 1000000)
        .onUpdate(this.render)
        .start()
    },
    onWindowResize () {
      this.camera.aspect = window.innerWidth / window.innerHeight
      this.camera.updateProjectionMatrix()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
    },
    animate () {
      requestAnimationFrame(this.animate)
      TWEEN.update()
    },
    render () {
      for (let i = 0; i < this.objects.length; i++) {
        let obj = this.objects[i]
        obj.position.z += 180
        if (obj.position.z > 800) {
          obj.position.z = 200 - (this.objects.length - 1) * 60 * 1.5
        }
      }
      this.renderer.render(this.scene, this.camera)
    }
  },
  mounted () {
    setTimeout(() => {
      this.getImgs()
      this.init()
      this.animate()
    }, 300)
  }
}
</script>

<style lang="less">
.get-award {
  #getAward {
    .element {
      width: 120px;
      height: 120px;
      box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
      border: 1px solid rgba(127, 255, 255, 0.25);
      cursor: default;
      img {
        position: absolute;
        border: none;
      }
    }
  }
  .kpstartbtn {
    display: inline-block;
    width: 128px;
    height: 128px;
    line-height: 60px;
    font-size: 30px;
    color: #fff;
    user-select: none;
    cursor: pointer;
    border: 10px solid silver;
    border-radius: 50%;
    background-color: #ff5722;
    z-index: 10;
    &:hover {
      border: 8px solid #fff8dc;
      background-color: rgba(0, 255, 255, 0.5);
    }
  }
}
</style>
